<template lang="pug">
  .text-primary-500.w-full.p-4

    .flex.justify-between
      div {{commentsCnt}}条评论

    el-divider

    .w-full.flex.justify-between
      .border-none.mr-4
        el-avatar(:src="userAvatar", :size="78")

      .flex-1
        .mb-4
          el-input(
            v-model="commentContent"
            type="textarea"
            :autosize="{minRows: 3}"
            placeholder="快发表你的观点吧~"
          )

        .flex.justify-between.mb-4
          div
            i.el-icon-warning-outline 支持markdown语法
          div
            el-button.ml-2 预览
            el-button.ml-2( type="success" @click="onSubmitComment" ) 留言

    .text-center(v-if="commentsCnt === 0") 来做第一个留言的人吧！
    div(v-else)
      NcCommentItem.mb-2(
        v-for="(commentItem, index) in commentList"
        :key="index"
        :comment-content="commentItem.commentContent"
        :user-avatar-url="commentItem.userAvatar"
      )

    NcLoginDialog(ref="login", :modal="false")
</template>

<script>
import { ElDivider, ElButton, ElInput } from 'element-ui'
import { mapState } from 'vuex'
import NcCommentItem from './NcCommentItem'

import NcLoginDialog from '~/components/login-comp/NcLoginDialog'

export default {
  name: 'NcGitalk2',
  components: { NcLoginDialog, NcCommentItem },
  props: {
    userLoginStatus: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      commentContent: '',
      commentList: [],
      defaultUserNickname: '神秘游客',
      defaultUserAvatar:
        'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/1200px-Octicons-mark-github.svg.png',
      LoginDialogVisible: false,
    }
  },

  computed: {
    ...mapState(['user']),
    commentsCnt() {
      return this.commentList.length
    },
    userNickname() {
      return this.user.nickname || this.defaultUserNickname
    },
    userAvatar() {
      return this.user.avatar || this.defaultUserAvatar
    },
  },

  methods: {
    showLoginDialog() {
      this.$refs.loginDialog.loginDialogVisible = !this.$refs.loginDialog
        .LoginDialogVisible
    },
    onSubmitComment() {
      if (!this.commentContent) {
        this.$message.error('你好像啥也没输入呢！')
      } else if (!this.$store.state.user.hasLogined) {
        this.$message.error('登录后才可以发表评论哦~')
        this.$refs.login.handleOpen()
      } else if (!this.user.avatar) {
        this.$message.error('要有头像才可以发表评论哦，可以点击左上角上传~')
      } else {
        this.commentList.push({
          commentContent: this.commentContent,
          userAvatar: this.userAvatar,
        })
        this.commentContent = ''
        this.$message.success('留言提交成功~')
      }
    },
  },
}
</script>
